<template>
  <vab-chart :option="option" />
</template>

<script lang="ts" setup>

defineOptions({
  name: 'DataScreenLeft2',
})

const option = reactive<any>({
  grid: {
    left: '20px',
    right: '20px',
    bottom: '20px',
    top: '20px',
    containLabel: true,
  },
  tooltip: {
    trigger: 'item',
  },
  series: {
    name: '性别',
    type: 'pie',
    radius: ['40%', '80%'],
    itemStyle: {
      borderRadius: 10,
      borderColor: '#01ffff',
      borderWidth: 2,
      color: (params: any) => {
        const colorList = ['#385afe', '#95de64', '#ff7a45', '#101e57', '#2c3e50']
        return colorList[params.dataIndex]
      },
    },
    label: {
      show: true,
      color: '#fff',
    },
    data: [
    { value: 51.31, name: '男' },
    { value: 45.51, name: '女' },
    { value: 3.18, name: '未知' },
    ],
  },
})

option.series.data = [
    { value: 51.31, name: '男' },
    { value: 45.51, name: '女' },
    { value: 3.18, name: '未知' },
  ]

</script>
